import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TextInput, FlatList, Image, Alert } from 'react-native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { RootStackParamList } from '../navigation/types';
import { wp, hp, sp } from '../utils/layout';
const doctors = [
  {
    id: '1',
    name: '张医生',
    title: '内科主治医师',
    rating: 4.9,
    consults: 2000,
    avatar: null, // 可替换为图片链接
  },
  {
    id: '2',
    name: '李医生',
    title: '内科主治医师',
    rating: 4.9,
    consults: 2000,
    avatar: null,
  },
  {
    id: '3',
    name: '刘医生',
    title: '内科主治医师',
    rating: 4.9,
    consults: 2000,
    avatar: null,
  },
];
type CommonScreenProps = {
  navigation: NativeStackNavigationProp<RootStackParamList, 'Common'>;
};
const CommonScreen: React.FC<CommonScreenProps> = ({ navigation }) => {
  const [inputText, setInputText] = useState('');
  const renderDoctor = ({ item }: any) => (
    <View style={styles.card}>
      <View style={styles.avatarBox}>
        {item.avatar ? (
          <Image source={{ uri: item.avatar }} style={styles.avatar} />
        ) : (
          <View style={styles.avatarPlaceholder}><Text style={styles.avatarText}>Z</Text></View>
        )}
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.doctorName}>{item.name}</Text>
        <Text style={styles.doctorTitle}>{item.title}</Text>
        <View style={styles.row}>
          <Text style={styles.star}>★</Text>
          <Text style={styles.rating}>{item.rating}</Text>
          <Text style={styles.consult}>问诊量: {item.consults}+</Text>
        </View>
      </View>
      <TouchableOpacity style={styles.consultBtn} onPress={() => navigation.navigate('Ke')}>
        <Text style={styles.consultBtnText}>立即咨询</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <View style={styles.container}>
      {/* 顶部栏 */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Icon name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>
        <View style={styles.headerTitleBox}>
          <Text style={styles.title_top}>专业医生在线解答</Text>
          <Text style={styles.title_top}>您的健康问题</Text>
        </View>
      </View>
      {/* 搜索框 */}
      <View style={styles.searchBox}>
        <TextInput
          style={styles.input}
          value={inputText}
          onChangeText={setInputText}
          placeholder="请输入要查询的内容"
          placeholderTextColor="#bbb"
        />
      </View>
      {/* 筛选栏 */}
      <View style={styles.filterBar}>
        <Text style={styles.filterText}>全国</Text>
        <Text style={styles.filterText}>科室</Text>
        <Text style={styles.filterText}>综合排序 ▼</Text>
      </View>
      {/* 医生列表 */}
      <FlatList
        data={doctors}
        renderItem={renderDoctor}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.listContent}
      />
      {/* 加载更多 */}
      <TouchableOpacity style={styles.loadMoreBtn}>
        <Text style={styles.loadMoreText}>点击加载更多</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f7faff',
  },
  header: {
    backgroundColor: '#cce4fc',
    paddingTop: 40,
    paddingBottom: 10,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
    position: 'relative',
  },
  backBtn: {
    marginRight: 10,
  },
  backButtonText: {
    fontSize: 28,
    color: 'black',
    fontWeight: 'bold',
  },
  headerTitleBox: {
    flex: 1,
    alignItems: 'center',
  },
  title_top: {
    fontSize: 16,
    color: '#222',
    textAlign: 'center',
    fontWeight: 'bold',
    marginTop: 10,
  },
  searchBox: {
    backgroundColor: '#cce4fc',
    paddingHorizontal: 16,
    paddingBottom: 12,
  },
  input: {
    backgroundColor: '#fff',
    borderRadius: 20,
    paddingHorizontal: 16,
    height: 36,
    fontSize: 14,
    borderWidth: 0,
  },
  filterBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#fff',
    height: 40,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  filterText: {
    fontSize: 15,
    color: '#222',
  },
  listContent: {
    paddingBottom: 20,
  },
  card: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    marginHorizontal: 12,
    marginTop: 16,
    borderRadius: 12,
    padding: 16,
    shadowColor: '#000',
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  avatarBox: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#e0e0e0',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
  },
  backButton: {
    padding: wp(4),
    position: 'absolute',
    left:20,
    top:10,
  },
  avatarPlaceholder: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#bbb',
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarText: {
    color: '#fff',
    fontSize: 22,
    fontWeight: 'bold',
  },
  infoBox: {
    flex: 1,
  },
  doctorName: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#222',
  },
  doctorTitle: {
    fontSize: 13,
    color: '#888',
    marginTop: 2,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 4,
  },
  star: {
    color: '#f7b500',
    fontSize: 15,
    marginRight: 2,
  },
  rating: {
    fontSize: 13,
    color: '#f7b500',
    marginRight: 10,
  },
  consult: {
    fontSize: 13,
    color: '#888',
  },
  consultBtn: {
    backgroundColor: '#1976ff',
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginLeft: 10,
  },
  consultBtnText: {
    color: '#fff',
    fontSize: 15,
    fontWeight: 'bold',
  },
  loadMoreBtn: {
    alignItems: 'center',
    marginVertical: 16,
  },
  loadMoreText: {
    color: '#888',
    fontSize: 15,
  },
});

export default CommonScreen;